<div class="flex-header">
  <div class="header-item">任务号：{{ _pipe.taskCode }}</div>
  <div class="header-item">图号：{{ _pipe.drawingCode }}</div>
  <div class="header-item">任务名称：{{ _pipe.taskName }}</div>
  <div class="header-item">数量：{{ _pipe.amountPlanned }}</div>
  <div class="header-item">完成时间：{{ _pipe.dueDatePlanned | momentFormat: 'YYYY-MM-DD' }}</div>
  <div class="header-item" *ngIf="this._pipe.statusName === '完成'">
    <button
      type="button"
      class="btn btn-sm m-btn m-btn--gradient-from-danger m-btn--gradient-to-warning"
      (click)="stepDetailModal.show(_pipe.id)"
    >
      查看详细
    </button>
  </div>
</div>

<div class="flex">
  <div class="prev">
    <a href="javascript:;" (click)="onPrevClick($event)" [hidden]="firstIdx <= 1">
      <i class="fa fa-chevron-left"></i>
    </a>
  </div>

  <div class="flex-pipe">
    <div
      *ngFor="let component of currentComponents"
      class="flex-component"
      [ngClass]="{
        'component-active': component.isCurrent,
        'finish-component': this._pipe.statusName === '完成' || component.seq < currentComponentIdx
      }"
    >
      <div class="component-context">
        <div class="component__title">
          <span
            class="m-badge m-badge--success"
            style="min-width: 12px; min-height: 12px;"
            *ngIf="component.ifAutomatic"
          ></span>
          <font> {{ component.seq }}.{{ component.actName }} </font>
          <i *ngIf="component.isTriggeredAbnormal" class="fa fa-exclamation-triangle m--font-warning"></i>
          <i *ngIf="component.isInstertedAct" class="fa fa-exclamation-triangle m--font-info"></i>
        </div>
        <div class="component__role">
          <i class="fa fa-user" style="color: #999;"></i>
          <span *ngIf="component.execuUser">&nbsp; {{ component.execuUser }}</span>
          <span *ngIf="!component.execuUser">&nbsp; {{ component.actRole }}</span>
        </div>
        <div class="component__type">
          <i class="fa fa-cube" style="font-size: 12px; color: #999;"></i> {{ component.actTypeName }}
        </div>
        <div>
          <span style="color: #666;" *ngIf="component.seq < currentComponentIdx">
            <i class="fa fa-hourglass-end" style="color: #999;"></i> {{ component.warningDateStr }}
          </span>
          <a
            href="javascript:;"
            style="color: #666;"
            *ngIf="component.seq >= currentComponentIdx"
            (click)="warningTimeModal.show(_pipe, component)"
          >
            <i class="fa fa-hourglass-end" style="color: #999;"></i> {{ component.warningDateStr }}
            <input type="data" *ngIf="showInput" />
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="next">
    <a href="javascript:;" (click)="onNextClick($event)" [hidden]="lastIdx >= length">
      <i class="fa fa-chevron-right"></i>
    </a>
  </div>

  <warningTimeModal #warningTimeModal></warningTimeModal> <stepDetailModal #stepDetailModal></stepDetailModal>
</div>
